<template>
  <div>
    <el-card>
      <div
        class="collapse_title"
        :style="isCollapse === true ? 'border-bottom: 1px solid #f2f2f2':'border-bottom: 1px solid #ffffff00'"
      >
        <div class="collapse_title_left">
          <div>
            {{ title }}
          </div>
          <div>
            <slot name="titleSlot"></slot>
          </div>
        </div>
        <div class="collapse_title_right">
          <i
            class="el-icon-d-arrow-left"
            @click="toggleDiv"
            :style="isCollapse === false ? 'transform: rotate(180deg);':'transform: rotate(270deg);'"
          ></i>
        </div>
      </div>
      <div
        class="box1"
        ref="box1"
        id="box1"
      >
        <slot></slot>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Collapse',
  components: {
  },
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      isCollapse: false,
    }
  },
  mounted () {
    // 刚开始的时候, 就必须先获取到这个元素的高度(transition需要有两个数值才能产生过渡), 它必须刚开始就是可见的(不能display:none)
    this.$refs['box1'].style.height = 0
  },
  methods: {
    toggleDiv () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.$refs['box1'].style.height = this.$refs['box1'].scrollHeight + 'px'
      } else {
        // 这个时候，box1已经收缩了，但是需要展开，那就必须获取到它的高度(此时它的style的height为0)
        this.$refs['box1'].style.height = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body {
  padding: 0 !important;
}
.collapse_title {
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  .collapse_title_left {
    display: flex;
    align-items: center;
    > div:nth-child(2) {
      margin-left: 20px;
    }
    > div:nth-child(1) {
      color: #293231;
      font-weight: bold;
      font-size: 16px;
      font-family: "黑体";
    }
  }
}
.box1 {
  width: 100%;
  /* height: 200px; */
  transition: height 0.3s;
  overflow: hidden;
}
.el-icon-d-arrow-left {
  cursor: pointer;
}
/deep/.el-card {
  border-radius: 10px;
}
</style>
